﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <meta name="keywords" content="jQuery, Grid, Grid plugin, Grid View, Help Documentation" />
    <meta name="description" content="This page represents the help documentation of the jqxGrid widget." />
    <title>jqxGrid API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Appearance
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>altrows</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the alternating rows.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>altrows</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ altrows: false}); </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
          <td class="documentation-option-type-click">
                    <span id='Span17'>altstart</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This property specifies the first alternating row.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>altstart</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ altstart: 2}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
          <td class="documentation-option-type-click">
                    <span id='Span18'>altstep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the alternating step</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>altstep</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ altstep: 2}); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span146'>autoshowfiltericon</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            Displays the filter icon only when the column is filtered. When the value of this property is set to false, all grid columns will display a filter icon when the filtering is enabled.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>autoshowfiltericon</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ autoshowfiltericon: false}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span34'>closeablegroups</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            When the value of this property is true, a close button is displayed in each grouping column.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>closeablegroups</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ closeablegroups: false}); </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
            <td class="documentation-option-type-click">
                    <span id='Span40'>columnsmenuwidth</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    15
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxmenu.js)</p>
                        <p>
                            Sets the columns menu width.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>columnsmenuwidth</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ columnsmenuwidth: 20}); </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>enablerowdetailsindent</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            When the enablerowdetailsindent is true, the content of a details row is displayed with left offset equal to the width of the row details column.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>enablerowdetailsindent</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ enablerowdetailsindent: false}); </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
            <td class="documentation-option-type-click">
                    <span id='Span43'>enableanimations</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Enables or disables the grid animations.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>enableanimations</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ enableanimations: false}); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
            <td class="documentation-option-type-click">
                    <span id='Span44'>enabletooltips</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Enables or disables the grid tooltips.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>enabletooltips</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ enabletooltips: false}); </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
            <td class="documentation-option-type-click">
                    <span id='Span45'>enablehover</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                           Enables or disables the grid rows hover state.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>enablehover</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ enablehover: false}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span21'>groupsrenderer</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            This function is called when a group is rendered. You can use it to customize the default group rendering.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with a <code>groupsrenderer</code> specified.
                        </p>
                        <pre><code> 
var groupsrenderer = function (text, group, expanded) {
    return "<span>" + group + "</span>";
}

$("#jqxgrid").jqxGrid(
{
    source: source,
    groupsrenderer: groupsrenderer,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry' }
    ],
    groupable: true,
    groups: ['ShipCity']
});
            </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span22'>groupcolumnrenderer</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Sets a custom renderer for the grouping columns displayed in the grouping header when the grouping feature is enabled.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with a <code>groupcolumnrenderer</code> specified.
                        </p>
                        <pre><code>
var groupcolumnrenderer = function (text) {
return '&lt;div style=&quot;padding: 5px; float: left; color: Blue;&quot;&gt;' + text + '&lt;/div&gt;';
}

$("#jqxgrid").jqxGrid(
{
    source: source,
    groupcolumnrenderer: groupcolumnrenderer,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 250 },
    { text: 'Ship City', datafield: 'ShipCity', width: 100 },
    { text: 'Ship Country', datafield: 'ShipCountry' }
    ],
    groupable: true,
    groups: ['ShipCity']
});
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
        <td class="documentation-option-type-click">
                    <span id='Span23'>groupsexpandedbydefault</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Sets the default state of the grouped rows.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>groupsexpandedbydefault</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ groupsexpandedbydefault: true}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span24'>pagerrenderer</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            The function is called when the Grid Pager is rendered. This allows you to customize the 
                            default rendering of the pager.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with a <code>pagerrenderer</code> specified.
                        </p>
                        <pre><code>
var pagerrenderer = function () {
    var element = $(&quot;&lt;div style='margin-top: 5px; width: 100%; height: 100%;'&gt;&lt;/div&gt;&quot;);
    var paginginfo = $(&quot;#jqxgrid&quot;).jqxGrid('getpaginginformation');
    for (i = 0; i &lt; paginginfo.pagescount; i++) {
        var anchor = $(&quot;&lt;a style='padding: 5px;' href='#&quot; + i + &quot;'&gt;&quot; + i + &quot;&lt;/a&gt;&quot;);
        anchor.appendTo(element);
        anchor.click(function (event) {
            var pagenum = parseInt($(event.target).text());
            $(&quot;#jqxgrid&quot;).jqxGrid('gotopage', pagenum);
        });
    }

    return element;
}

$(&quot;#jqxgrid&quot;).jqxGrid(
{
    width: 670,
    source: source,
    pagerrenderer: pagerrenderer,
    sortable: true,
    pageable: true,
    autoheight: true,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
        { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
        { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
    ]
});
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span147'>showfiltercolumnbackground</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            When this property is true, the Grid adds an additional visual style to the grid cells in the filter column(s).</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>showfiltercolumnbackground</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ showfiltercolumnbackground: false}); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span148'>showpinnedcolumnbackground</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            When this property is true, the Grid adds an additional visual style to the grid cells in the pinned column(s).</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>showpinnedcolumnbackground</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ showpinnedcolumnbackground: false}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span149'>showsortcolumnbackground</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>
                        <p>
                            When this property is true, the Grid adds an additional visual style to the grid cells in the sort column.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>showsortcolumnbackground</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ showsortcolumnbackground: false}); </code></pre>
                    </div>
                </td>
           </tr>         
           <tr>
           <td class="documentation-option-type-click">
                    <span id='Span19'>showrowdetailscolumn</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows an additional column with expand/collapse toggle buttons when the Row details feature is enabled.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>showrowdetailscolumn</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ showrowdetailscolumn: false}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span32'>showheader</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows or hides the columns header.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>showheader</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ showheader: false}); </code></pre>
                    </div>
                </td>
            </tr>
             <tr>
            <td class="documentation-option-type-click">
                    <span id='Span33'>showgroupsheader</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                        Shows or hides the groups header area.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>showgroupsheader</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ showgroupsheader: true}); </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
            <td class="documentation-option-type-click">
                    <span id='Span46'>selectionmode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'singlerow'
                </td>
            </tr>
          <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.selection.js)</p>
                        <p>
                           Sets the selection mode to "none", "singlerow", "multiplerows", "multiplerowsextended", "singlecell", "multiplecells", "multiplecellsextended".</p>
                           <ul>
                            <li>"none" - disables the selection.</li>
                            <li>"singlerow" - full row selection.</li>
                            <li>"multiplerows" - each click selects a new row. Click on a selected row unselects it.</li>
                            <li>"multiplerowsextended" - multiple rows selection with drag and drop. The selection behavior resembles the selection of icons on your desktop.</li>
                            <li>"singlecell" - single cell selection.</li>
                            <li>"multiplecells" - each click selects a new cell. Click on a selected cell unselects it..</li>
                            <li>"multiplecellsextended" - The ‘multiplecellsextended’ mode is the most advanced cells selection mode. In this mode, users can select multiple cells with a drag and drop. The selection behavior resembles the selection of icons on your desktop.</li>
                           </ul>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>selectionmode</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ selectionmode: 'none'}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Layout
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>   
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the Grid height.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>height</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ height: 250 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span134'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    600
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the Grid width.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>width</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ width: 250 }); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>pagerheight</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    28
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                         <p>(requires jqxgrid.pager.js)</p>
                       <p>
                            Sets the height of the Grid Pager.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>pagerheight</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ pagerheight: 30}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>groupsheaderheight</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    34
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Sets the height of the Grid Groups Header.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>groupsheaderheight</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ groupsheaderheight: 40}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>rowsheight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    25
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the height of the grid rows.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>rowsheight</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ rowsheight: 20}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
           <td class="documentation-option-type-click">
                    <span id='Span8'>columnsheight</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    25
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the columns height.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>columnsheight</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ columnsheight: 30}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>groupindentwidth</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    20
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>(requires jqxgrid.grouping.js)</p>
                       <p>
                            Sets the group indent size. This size is used when the grid is grouped. This is the size of the columns with expand/collapse toggle buttons.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>groupindentwidth</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ groupindentwidth: 30}); </code></pre>
                    </div>
                </td>
            </tr>        
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span31'>autoheight</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the height of the grid to be equal to the summary height of the grid rows. This option should be set when the Grid is in paging mode.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>autoheight</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ autoheight: true}); </code></pre>
                    </div>
                </td>
            </tr>          
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span35'>scrollbarsize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    15
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        Sets the scrollbars size.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>scrollbarsize</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ scrollbarsize: 17}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>                                
         <tr>
             <th>
                    Behavior
              </th>
              <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>   
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the Grid plugin.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>disabled</code> property specified.
                        </p>
                        <pre><code>$("#grid").jqxGrid({ disabled: true});</code></pre>
                    </div>
                </td>
            </tr>   
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span165'>verticalscrollbarstep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the scrollbar's step when the user clicks the scroll arrows.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>verticalscrollbarstep</code> property specified.
                        </p>
                        <pre><code>$("#grid").jqxGrid({ verticalscrollbarstep: 15});</code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span166'>verticalscrollbarlargestep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the scrollbar's large step. This property specifies the step with which the vertical scrollbar's
                            value is changed when the user clicks the area above or below the thumb.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>verticalscrollbarlargestep</code> property specified.
                        </p>
                        <pre><code>$("#grid").jqxGrid({ verticalscrollbarlargestep: 50});</code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span167'>horizontalscrollbarstep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the scrollbar's step when the user clicks the scroll arrows.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>horizontalscrollbarstep</code> property specified.
                        </p>
                        <pre><code>$("#grid").jqxGrid({ horizontalscrollbarstep: 15});</code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span168'>horizontalscrollbarlargestep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    50
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the scrollbar's large step. This property specifies the step with which the horizontal scrollbar's
                            value is changed when the user clicks the area above or below the thumb.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>horizontalscrollbarlargestep</code> property specified.
                        </p>
                        <pre><code>$("#grid").jqxGrid({ horizontalscrollbarlargestep: 50});</code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span169'>keyboardnavigation</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.selection.js)</p>
                        <p>
                            Enables or disables the keyboard navigation.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>keyboardnavigation</code> property specified.
                        </p>
                        <pre><code>$("#grid").jqxGrid({ keyboardnavigation: false});</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>pagesize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            Sets the number of visible rows per page when the Grid paging is enabled.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>pagesize</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ pagesize: 20}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>pagesizeoptions</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    ['5', '10', '20']
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            Sets the available page size options.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>pagesizeoptions</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ pagesizeoptions: ['10', '20', '30']}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>rowdetails</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the row details. When this option is enabled, the Grid can show additional information below each grid row.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>rowdetails</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ rowdetails: true}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>initrowdetails</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This function is called when the user expands the row details and the details are going to be rendered.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>initrowdetails</code> specified.
                        </p>
                        <pre><code>
                        var initrowdetails = function (index) {
                            // your row details initialization code here. The index is the index of the expanded row with details.
                        }
                        $('#grid').jqxGrid({ initrowdetails: initrowdetails}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span138'>ready</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This function is called when the grid is initialized and the binding is complete.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>ready</code>function specified.
                        </p>
                        <pre><code>
$("#jqxgrid").jqxGrid(
{
    source: source, 
    ready: function()
    {
        $("#jqxgrid").jqxGrid('sortby', 'firstname', 'asc');     
    },
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100 },
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
    ]
});                        
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>pageable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            Enables or disables the Grid Paging feature. When the value of this property is true, 
                            the Grid displays a pager below the rows.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>pageable</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ pageable: true}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span139'>filterable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.filter.js)</p>
                        <p>
                            Enables or disables the Grid Filtering feature. When the value of this property is true, 
                            the Grid displays a filtering panel in the columns popup menus.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>filterable</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ filterable: true}); </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
          <td class="documentation-option-type-click">
                    <span id='Span163'>editable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.edit.js)</p>
                        <p>
                            The editable property enables or disables the Grid editing feature.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>editable</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ editable: true}); </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
          <td class="documentation-option-type-click">
                    <span id='Span164'>editmode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'selectedcell'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.edit.js)</p>
                        <p>
                            The editmode property specifies the action that the end-user should make to open an editor.
                            <br />
                            Possible Values:
                            "click", "dblclick", "selectedcell" or "programmatic".
                            - 'click' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value.
                            - 'selectedcell' - Marks the cell as selected. A second click on the selected cell shows the editor. The editor’s value is equal to the cell’s value.
                            - 'dblclick' - Marks the clicked cell as selected and shows the editor. The editor’s value is equal to the cell’s value.
                            - 'programmatic' - Cell editors are activated and deactivated only through the API(see begincelledit and endcelledit methods). 
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>editmode</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ editmode: 'click'}); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
          <td class="documentation-option-type-click">
                    <span id='Span15'>sortable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>
                        <p>
                            The sortable property enables or disables the sorting feature.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>sortable</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ sortable: true}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>groupable</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                           This property enables or disables the grouping feature. </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>groupable</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ groupable: true}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span20'>groups</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.grouping.js)</p>
                        <p>
                            Sets the Grid groups when the Grouping feature is enabled.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>groups</code> property specified.
                        </p>
                        <pre><code>          
$("#jqxgrid").jqxGrid(
{
    source: source,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry' }
    ],
    groupable: true,
    groups: ['ShipCity']
});
            </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span25'>columns</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the Grid columns.</p>
                        <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>columns</code> property specified.
                        </p>
                        <pre><code>
$("#jqxgrid").jqxGrid(
{
    source: source,
    columns: [
        { text: 'Ship Name', datafield: 'ShipName', width: 250 },
        { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
        { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
        { text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
        { text: 'Ship City', datafield: 'ShipCity', width: 100 },
        { text: 'Ship Country', datafield: 'ShipCountry', width: 100 }
    ]
});                        
                        </code></pre>
<br />
Column Properties:

<ul>
    <li>text - sets the column text.</li>
    <li>datafield - sets the column datafield.</li>
    <li>sortable - enables or disables the sorting.</li>
    <li>filterable - enables or disables the filtering.</li>
    <li>hideable - enables or disables whether the column can be hidden.</li>
    <li>hidden - hides or shows the column.</li>
    <li>groupable - sets whether the user can group by this column.</li>
    <li>menu - sets whether the menu button is displayed when the user moves the mouse cursor over the column header.</li>
    <li>renderer - sets a custom column renderer. This can be used for changing the default display of the column header.</li>
    <li>cellsrenderer - sets a custom rendering function of the cells in the column.</li>
    <li>columntype - sets the column's type. In this version there are only two additional column types - checkbox and number.</li>
    <li>validation - sets a custom validation function. The Grid passes 2 parameters to it - edit cell and the cell's value. The function should return
    true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users.
<pre><code>
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    validation: function (cell, value) {
        if (value < 0 || value > 150) {
            return { result: false, message: "Quantity should be in the 0-150 interval" };
        }
        return true;
    }
}
</code></pre>
    </li>
   <li>initeditor - sets a custom function which is called when the cells editor is opened. The Grid passes 3 parameters to it - row index, cell value and the editor element. The function can be 
   used for adding some custom parameters to the editor.
<pre><code>
{ text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput',
    initeditor: function (row, cellvalue, editor) {
        editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
}
</code></pre>
    </li>
   <li>createeditor - sets a custom function which is called when the cells editor is created. The Grid passes 3 parameters to it - row index, cell value and the editor element. The function can be 
   used for adding some custom parameters to the editor.
<pre><code>
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    createeditor: function (row, cellvalue, editor) {
        var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];
        editor.jqxDropDownList({source: dataSource });
    }
}
</code></pre>
    </li>
   <li>cellbeginedit - sets a custom function which is called when a cell enters into edit mode. The Grid passes 3 parameters to it - row index, column data field and column type. The function can be 
   used for canceling the editing of a specific Grid cell. To cancel the editing, the function should return false.
<pre><code>
{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177,
    cellbeginedit: function (row, datafield, columntype) {
        if (row == 2)
            return false;
    }
}
</code></pre>
    </li>
   <li>cellendedit - sets a custom function which is called when a cell leaves the edit mode. The Grid passes 5 parameters to it - row index, column data field, column type, old cell value, new cell value. The function can be 
   used for canceling the changes of a specific Grid cell. To cancel the changes, the function should return false.
<pre><code>
{ text: 'Product', datafield: 'productname',
    cellendedit: function (row, datafield, columntype, oldvalue, newvalue) {
        if (newvalue == "My Value")
            return false;
    }
}
</code></pre>
    </li>
    <li>cellsformat - sets the formatting of the grid cells.<br />
<br />
Possible Number strings:
<br />
"d" - decimal numbers.
<br />
"f" - floating-point numbers.
<br />
"n" - integer numbers.
<br />
"c" - currency numbers.
<br />
"p" - percentage numbers.
<br />
<br />
For adding decimal places to the numbers, add a number after the formatting string.
<br />
For example: "c3" displays a number in this format $25.256 
<br />
Possible built-in Date formats:
<br />
<br />
// short date pattern
d: "M/d/yyyy",
<br />
// long date pattern
D: "dddd, MMMM dd, yyyy",
<br />
// short time pattern
t: "h:mm tt",
<br />
// long time pattern
T: "h:mm:ss tt",
<br />
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
<br />
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
<br />
// month/day pattern
M: "MMMM dd",
<br />
// month/year pattern
Y: "yyyy MMMM",
<br />
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
<br />
<br />  
Possible Date format strings:
<br />
<br />
"d"-the day of the month;<br />
"dd"-the day of the month;
<br />
"ddd"-the abbreviated name of the day of the week;<br />
"dddd"- the full name of the day of the week;<br />
"h"-the hour, using a 12-hour clock from 1 to 12;
<br />
"hh"-the hour, using a 12-hour clock from 01 to 12;
<br />
"H"-the hour, using a 24-hour clock from 0 to 23;<br />
"HH"- the hour, using a 24-hour clock from 00 to 23;
<br />
"m"-the minute, from 0 through 59;<br />
"mm"-the minutes,from 00 though59;<br />
"M"- the month, from 1 through 12;<br />
"MM"- the month, from 01 through 12;<br />
"MMM"-the abbreviated name of the month;<br />
"MMMM"-the full name of the month;<br />
"s"-the second, from 0 through 59;
<br />
"ss"-the second, from 00 through 59;
<br />
"t"- the first character of the AM/PM designator;<br />
"tt"-the AM/PM designator;
<br />
"y"- the year, from 0 to 99;
<br />
"yy"- the year, from 00 to 99;
<br />
"yyy"-the year, with a minimum of three digits;
<br />
"yyyy"-the year as a four-digit number;
<br />
"yyyyy"-the year as a four-digit number.
<br />
    </li>
    <li>align - sets the column header's alignment to 'left', 'center' or 'right'</li>
    <li>cellsalign - sets the cells alignment to 'left', 'center' or 'right'.</li>
    <li>width - sets the column width.</li>
    <li>minwidth - sets the column's min width.</li>
    <li>maxwidth - sets the column's max width.</li>
    <li>resizable - enables or disables the column resizing.</li>
    <li>editable - enables or disables the cells editing</li>
    <li>classname - sets a custom CSS class for the column's header</li>
    <li>cellclassname - sets a custom CSS class for the column's cells</li>
    <li>pinned - pins or unpins the column. If the column is pinned, it will be displayed as frozen and will be visible when the user horizontally scrolls the grid contents.</li>
</ul>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span26'>selectedrowindex</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    -1
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.selection.js)</p>
                        <p>
                            Selects a row at a specified index.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>selectedrowindex</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ selectedrowindex: 1}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span28'>selectedrowindexes</span>
                </td>
                <td>
                    <span>Array</span>
                </td>
                <td>
                    []
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.selection.js)</p>
                        <p>
                            Selects single or multiple rows.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>selectedrowindexes</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ selectedrowindexes: [0, 1, 2]}); </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span29'>source</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>
                    {}
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxdata.js)</p>
                        <p>
                            Sets the Grid data source.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>source</code> property specified.
                        </p>
            Bind the Grid to an array. The data member is array.
                        <pre><code>
// prepare the data
var data = new Array();

var firstNames =
[
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];

var lastNames =
[
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];

var productNames =
[
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];

var priceValues =
[
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];

for (var i = 0; i < 1000; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);

    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;

    data[i] = row;
}

var source =
{
    localdata: data,
    datatype: "array"
};

$("#jqxgrid").jqxGrid(
{
    source: source,
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100 },
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
});
                        </code></pre>
<br />
Bind the Grid to XML data. In the source initialization, you need to set the following:
<br />
- url of a xml file.
<br />
- id field.
<br />
- root data record.
<br />
- record - this is the data record which will be displayed as a row in the Grid.
<br />
- datatype - 'xml' 
<br />
- datafields - the record's member names. You can also specify the mapping to the member's data. 
<br />
<br />
Code Example:
<br />
<pre class="source-code"><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; standalone=&quot;yes&quot;?&gt;
&lt;feed xml:base=&quot;http://services.odata.org/Northwind/Northwind.svc/&quot; xmlns:d=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices&quot; xmlns:m=&quot;http://schemas.microsoft.com/ado/2007/08/dataservices/metadata&quot; xmlns=&quot;http://www.w3.org/2005/Atom&quot;&gt;
&lt;title type=&quot;text&quot;&gt;Customers&lt;/title&gt;
&lt;updated&gt;2011-11-30T11:39:28Z&lt;/updated&gt;
&lt;link rel=&quot;self&quot; title=&quot;Customers&quot; href=&quot;Customers&quot; /&gt;
&lt;entry&gt;
  &lt;title type=&quot;text&quot;&gt;&lt;/title&gt;
  &lt;updated&gt;2011-11-30T11:39:28Z&lt;/updated&gt;
  &lt;author&gt;
    &lt;name /&gt;
  &lt;/author&gt;
  &lt;content type=&quot;application/xml&quot;&gt;
    &lt;m:properties&gt;
      &lt;d:CustomerID&gt;ALFKI&lt;/d:CustomerID&gt;
      &lt;d:CompanyName&gt;Alfreds Futterkiste&lt;/d:CompanyName&gt;
      &lt;d:ContactName&gt;Maria Anders&lt;/d:ContactName&gt;
      &lt;d:ContactTitle&gt;Sales Representative&lt;/d:ContactTitle&gt;
      &lt;d:Address&gt;Obere Str. 57&lt;/d:Address&gt;
      &lt;d:City&gt;Berlin&lt;/d:City&gt;
      &lt;d:Region m:null=&quot;true&quot; /&gt;
      &lt;d:PostalCode&gt;12209&lt;/d:PostalCode&gt;
      &lt;d:Country&gt;Germany&lt;/d:Country&gt;
      &lt;d:Phone&gt;030-0074321&lt;/d:Phone&gt;
      &lt;d:Fax&gt;030-0076545&lt;/d:Fax&gt;
    &lt;/m:properties&gt;
  &lt;/content&gt;
&lt;/entry&gt;
&lt;/feed&gt;
</code></pre>
<br />
<pre><code>
var url = "customers.xml";

// prepare the data
var source =
{
    datatype: "xml",
    datafields: [
        { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' },
        { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' },
        { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' },
        { name: 'City', map: 'm\\:properties>d\\:City' },
        { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' },
        { name: 'Country', map: 'm\\:properties>d\\:Country' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:CustomerID',
    url: url
};

// Create jqxGrid
$("#jqxgrid").jqxGrid(
{
    width: 670,
    source: source,
    theme: theme,
    sortable: true,
    columns: [
        { text: 'Company Name', datafield: 'CompanyName', width: 250 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
        { text: 'City', datafield: 'City', width: 120 },
        { text: 'Postal Code', datafield: 'PostalCode', width: 90 },
        { text: 'Country', datafield: 'Country', width: 100 }
    ]
});
</code></pre> 
You can also set the datafield's type in the source object initialization.
<br />
For example:
<pre><code>
var source =
{
    datatype: "xml",
    datafields: [
        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
    ],
    root: "entry",
    record: "content",
    id: 'm\\:properties>d\\:OrderID',
    url: url,
    sortcolumn: 'ShipName',
    sortdirection: 'asc'
};
</code></pre>
<br />
The sortcolumn and sortdirection properties in the above code apply a sorting and a sort order to a Grid column.
<br />
Binding to JSON data.
<br />
<pre><code>
var source =
{
    datatype: "json",
    datafields: [
        { name: 'name'},
        { name: 'type'},
        { name: 'calories'},
        { name: 'totalfat'},
        { name: 'protein'},
    ],
    id: 'id',
    url: url
};

$("#jqxgrid").jqxGrid(
{
    source: source,
    columns: [
        { text: 'Name', datafield: 'name', width: 250},
        { text: 'Beverage Type', datafield: 'type', width: 250 },
        { text: 'Calories', datafield: 'calories', width: 180 },
        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
        { text: 'Protein', datafield: 'protein', width: 120 }
    ]
});   
</code></pre>
<br />
Additional properties of the source object are:
<ul>
<li>
data - Data to be sent to the server
</li>
<li>
sortcomparer - specifies a custom sorting comparer function.
</li>
<li>
filter - specifies a custom filtering function. The function will be called when the filters are applied and should return as a result a filtered array of data records.
</li>
<li>
sort - specifies a custom sorting function. The function will be called when a sorting is applied. Parameters sent to the function are the sort column and sort direction.
</li>
<li>
pager - a callback function called when the page or the page size is changed. Parameters sent to the function are the page number, page size and the old page number.
</li>
<li>
beforeprocessing - a function called when the Grid is bound to XML or JSON data and is called before the data processing.
</li>
<li>
loaderror - a function called when the Grid is trying to bound to XML or JSON data but the binding is not successful.
</li>
<li>
processdata - a function called before a request is sent to the server. You can use this function to add properties to the data be sent to the server.
</li>
</ul>
                    </div>
                </td>
            </tr>
            <tr>
            <td class="documentation-option-type-click">
                    <span id='Span30'>updatedelay</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the rendering update delay. This could be used for deferred scrolling scenarios.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>updatedelay</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ updatedelay: 5}); </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
            <td class="documentation-option-type-click">
                    <span id='Span36'>virtualmode</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the virtual data mode.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>virtualmode</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ virtualmode: true}); </code></pre>
                    </div>
                </td>
               </tr>
         <tr>
            <td class="documentation-option-type-click">
                    <span id='Span39'>columnsmenu</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxmenu.js)</p>
                        <p>
                            Enables or disables the columns dropdown menu.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>columnsmenu</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ columnsmenu: false}); </code></pre>
                    </div>
                </td>
            </tr>
        <tr>
            <td class="documentation-option-type-click">
                    <span id='Span151'>columnsresize</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.columnsresize.js)</p>
                        <p>
                            Enables or disables the columns resizing.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>columnsresize</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ columnsresize: false}); </code></pre>
                    </div>
                </td>
            </tr>
        <tr>
            <td class="documentation-option-type-click">
                    <span id='Span85'>rendered</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback function which is called when the jqxGrid's render function is called either internally or not.
                        </p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>re</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ rendered: function(){//to do}}); </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
            <td class="documentation-option-type-click">
                    <span id='Span41'>sorttogglestates</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>
                        <p>
                            Sets the sort toggle states.            
                            <br />
                            changes the sort state when the user clickes a column header.
                            <br /> 0 - disables toggling.
                            <br /> 1 - enables togging. Click on a column toggles the sort direction.
                            <br /> 2 - enables remove sorting option.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>sorttogglestates</code> property specified.
                        </p>
                        <pre><code>$('#grid').jqxGrid({ sorttogglestates: 1}); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
            <td class="documentation-option-type-click">
                    <span id='Span42'>rendergridrows</span>
                </td>
                <td>
                    <span>function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                        This is a function called when the grid is used in virtual mode. The function should return an array of rows which will be rendered by the Grid.</p>
                         <h4>
                            Code example</h4>
                        <p>
                            Initialize a Grid with the <code>rendergridrows</code> function specified.
                        </p>
                        <pre><code>
// prepare the data
var data = new Array();
var firstNames =
[
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];

var lastNames =
[
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];

var productNames =
[
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];

var priceValues =
[
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];

// generate sample data.
var generatedata = function (startindex, endindex) {
    var data = {};
    for (var i = startindex; i < endindex; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);

        row["id"] = i;
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;

        data[i] = row;
    }
    return data;
}

var source =
{
    datatype: "array",
    localdata: {},
    totalrecords: 1000000
};

// load virtual data.
var rendergridrows = function (params) {
    var data = generatedata(params.startindex, params.endindex);
    return data;
}            
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>initialized</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the Grid is initialized.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the initialized event by type: jqxGrid.
                        </p>
                        <pre><code>$('#jqxGrid').bind('initialized', function () { // Some code here. }); </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span47'>rowclick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a row is clicked.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the rowclick event by type: jqxGrid.
                        </p>
                        <pre><code>
$('#jqxGrid').bind('rowclick', function (event) 
{
    var args = event.args;
    var row = args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span176'>rowdoubleclick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a row is double clicked.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the rowdoubleclick event by type: jqxGrid.
                        </p>
                        <pre><code>
$('#jqxGrid').bind('rowdoubleclick', function (event) 
{
    var args = event.args;
    var row = args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span48'>rowselect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a row is selected.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the rowselect event by type: jqxGrid.
                        </p>
                        <pre><code>
$('#jqxGrid').bind('rowselect', function (event) 
{
    var args = event.args;
    var row = args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>rowunselect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a row is unselected.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the rowunselect event by type: jqxGrid.
                        </p>
                        <pre><code>
$('#jqxGrid').bind('rowunselect', function (event) 
{
    var args = event.args;
    var row = args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span174'>rowexpand</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a row with details is expanded.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the rowexpand event by type: jqxGrid.
                        </p>
                        <pre><code>
$('#jqxGrid').bind('rowexpand', function (event) 
{
    var args = event.args;
    var details = args.details;
    var row = args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span175'>rowcollapse</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a row with details is collapsed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the rowcollapse event by type: jqxGrid.
                        </p>
                        <pre><code>
$('#jqxGrid').bind('rowcollapse', function (event) 
{
    var args = event.args;
    var details = args.details;
    var row = args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span49'>groupexpand</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a group is expanded.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the groupexpand event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('groupexpand', function (event) {
    var args = event.args;
    var group = args.group;
    var level = args.level;
});
                        </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span52'>groupcollapse</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a group is collapsed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the groupcollapse event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('groupcollapse', function (event) {
    var args = event.args;
    var group = args.group;
    var level = args.level;
});
                        </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span50'>sort</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the Grid is sorted.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the sort event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("sort", function (event) {
    var sortinformation = event.args.sortinformation;
    var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span150'>filter</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the Grid is filtered.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the filter event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("filter", function (event) {
     var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span152'>columnresized</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a Grid Column is resized.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the columnresized event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("columnresized", function (event) {
    var args = event.args;
    var column = args.column;
    var newwidth = args.newwidth;
    var oldwidth = args.oldwidth;
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span53'>columnclick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a column is clicked.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the columnclick event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("columnclick", function (event) {
    var column = event.args.column;
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span177'>cellclick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell is clicked.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the cellclick event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("cellclick", function (event) {
    var column = event.args.column;
    var rowindex = event.args.rowindex;
    var columnindex = event.args.columnindex;
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span55'>celldoubleclick</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell is double-clicked.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the celldoubleclick event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("celldoubleclick", function (event) {
    var column = event.args.column;
    var rowindex = event.args.rowindex;
    var columnindex = event.args.columnindex;
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span153'>cellselect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell is selected.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the cellselect event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('cellselect', function (event) {
    var columnheader = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
    var rowindex = event.args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span154'>cellunselect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell is unselected.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the cellunselect event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('cellunselect', function (event) {
    var columnheader = $("#jqxgrid").jqxGrid('getcolumn', event.args.datafield).text;
    var rowindex = event.args.rowindex;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span170'>cellvaluechanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell's value is changed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the cellvaluechanged event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('cellvaluechanged', function (event) {
   var column = args.datafield;
   var row = args.rowindex;
   var value = args.value;
   var oldvalue = args.oldvalue;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span171'>cellbeginedit</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell's editor is displayed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the cellbeginedit event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('cellbeginedit', function (event) {
   var column = args.datafield;
   var row = args.rowindex;
   var value = args.value;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span172'>cellendedit</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a cell's edit operation has ended.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the cellendedit event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind('cellendedit', function (event) {
   var column = args.datafield;
   var row = args.rowindex;
   var value = args.value;
   var oldvalue = args.oldvalue;
});
                         </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span54'>pagechanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the current page is changed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the pagechanged event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("pagechanged", function (event) {
     var args = event.args;
     var pagenum = args.pagenum;
     var pagesize = args.pagesize;
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
   <tr>
                <td class="documentation-option-type-click">
                    <span id='Span56'>pagesizechanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the page size is changed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the pagesizechanged event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("pagesizechanged", function (event) {
     var args = event.args;
     var pagenum = args.pagenum;
     var oldpagesize = args.oldpagesize;
     var pagesize = args.pagesize;
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
  <tr>
                <td class="documentation-option-type-click">
                    <span id='Span57'>bindingcomplete</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the binding is completed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the bindingcomplete event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("bindingcomplete", function (event) {
 // your code here.
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
<tr>
                <td class="documentation-option-type-click">
                    <span id='Span58'>groupschanged</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when a group is added, inserted or removed.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Bind to the groupschanged event by type: jqxGrid.
                        </p>
                        <pre><code>
$("#jqxgrid").bind("groupschanged", function (event) {
 // your code here.
});                       
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Common
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span82'>getcolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a column by datafield value.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getcolumn method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
var column = $('#grid').jqxGrid('getcolumn', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span83'>setcolumnproperty</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets a property of a column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setcolumnproperty method. Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'
                        </p>
                        <pre><code>
// @param String. Column data field.
// @param String. Property Name.
// @param Object. Property Value.
$('#grid').jqxGrid('setcolumnproperty', 'firstname', 'width', 100);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span84'>getcolumnproperty</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a property of a column.  Possible property names: 'text', 'hidden', 'hideable', 'renderer', 'cellsrenderer', 'align', 'cellsalign', 'cellsformat', 'pinned', 'contenttype', 'resizable', 'filterable', 'editable', 'cellclassname', 'classname', 'width', 'minwidth', 'maxwidth'
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getcolumnproperty method.
                        </p>
                        <pre><code>
// @param String. Column data field.
// @param String. Property Name.
var value = $('#grid').jqxGrid('getcolumnproperty', 'firstname', 'width');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span88'>hidecolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides a column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hidecolumn method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
$('#grid').jqxGrid('hidecolumn', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span89'>showcolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows a column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the showcolumn method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
$('#grid').jqxGrid('showcolumn', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span90'>iscolumnvisible</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets whether a column is visible.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the iscolumnvisible method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
var visible = $('#grid').jqxGrid('iscolumnvisible', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span92'>iscolumnhideable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets whether a column is hideable.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the iscolumnhideable method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
var hideable = $('#grid').jqxGrid('iscolumnhideable', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span104'>pincolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Pins the column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the pincolumn method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
$('#grid').jqxGrid('pincolumn', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span105'>unpincolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Unpins the column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the unpincolumn method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
$('#grid').jqxGrid('unpincolumn', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span106'>iscolumnpinned</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets whether a column is pinned.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the iscolumnpinned method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
var pinned = $('#grid').jqxGrid('iscolumnpinned', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span81'>setrowdetails</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets details to a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setrowdetails method.
                        </p>
                        <pre><code>
// @param Number. The row index.
// @param String. Row details.
// @param Number. Height or Row Details.
// @param Boolean. Hidden state.
$(&quot;#jqxgrid&quot;).jqxGrid('beginupdate');
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 0, &quot;&lt;div class='tabs0' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Nancy Davolio&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information0'&gt;&lt;/div&gt;&lt;div class='notes0'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, false);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 1, &quot;&lt;div class='tabs1' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Andrew Fuller&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information1'&gt;&lt;/div&gt;&lt;div class='notes1'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 2, &quot;&lt;div class='tabs2' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Janet Leverling&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information2'&gt;&lt;/div&gt;&lt;div class='notes2'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 3, &quot;&lt;div class='tabs3' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Margaret Peacock&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information3'&gt;&lt;/div&gt;&lt;div class='notes3'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 4, &quot;&lt;div class='tabs4' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Steven Buchanan&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information4'&gt;&lt;/div&gt;&lt;div class='notes4'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 5, &quot;&lt;div class='tabs5' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Michael Suyama&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information5'&gt;&lt;/div&gt;&lt;div class='notes5'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 6, &quot;&lt;div class='tabs6' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Robert King&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information6'&gt;&lt;/div&gt;&lt;div class='notes6'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 7, &quot;&lt;div class='tabs7' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Laura Callahan&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information7'&gt;&lt;/div&gt;&lt;div class='notes7'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', 8, &quot;&lt;div class='tabs8' style='margin: 10px;'&gt;&lt;ul style='margin-left: 30px;'&gt;&lt;li&gt;Anne Dodsworth&lt;/li&gt;&lt;li&gt;Notes&lt;/li&gt;&lt;/ul&gt;&lt;div class='information8'&gt;&lt;/div&gt;&lt;div class='notes8'&gt;&lt;/div&gt;&lt;/div&gt;&quot;, 200, true);
$(&quot;#jqxgrid&quot;).jqxGrid('resumeupdate');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span110'>getrowdetails</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the rows details.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrowdetails method.
                        </p>
                        <pre><code>
// @param Number. The row index.
var details = $('#grid').jqxGrid('getrowdetails', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span111'>showrowdetails</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows the details of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the showrowdetails method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('showrowdetails', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span112'>hiderowdetails</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides the details of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hiderowdetails method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('hiderowdetails', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span118'>hiderow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the hiderow method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('hiderow', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span119'>showrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the showrow method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('showrow', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span120'>isrowhiddenat</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the hidden state of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the isrowhiddenat method.
                        </p>
                        <pre><code>
// @param Number. The row index.
var hidden = $('#grid').jqxGrid('isrowhiddenat', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
  <tr>
                <td class="documentation-option-type-click">
                    <span id='Span121'>updatebounddata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Updates the bound data and refreshes the grid.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the updatebounddata method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('updatebounddata');
                        </code></pre>
                    </div>
                </td>
            </tr>
  <tr>
                <td class="documentation-option-type-click">
                    <span id='Span122'>refreshdata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes the data.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the refreshdata method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('refreshdata');
                        </code></pre>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span173'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Repaints the Grid View.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the refresh method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('refresh');
                        </code></pre>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span123'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Renders the Grid contents. The 'render' method completely refreshes the Grid cells, columns, layout and repaints the view. 
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the render method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('render');
                        </code></pre>
                    </div>
                </td>
            </tr>
   <tr>
                <td class="documentation-option-type-click">
                    <span id='Span124'>clear</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears the Grid contents.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the clear method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('clear');
                        </code></pre>
                    </div>
                </td>
            </tr>
<tr>
                <td class="documentation-option-type-click">
                    <span id='Span128'>getrowid</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the id of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrowid method.
                        </p>
                        <pre><code>
// @param row index.
var id = $('#grid').jqxGrid('getrowid', 0);
                        </code></pre>
                    </div>
                </td>
            </tr>

          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span132'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes the Grid from the document and releases its resources.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the destroy method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('destroy');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span127'>getrowdata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the data of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrowdata method.
                        </p>
                        <pre><code>
// @param row index.
var data = $('#grid').jqxGrid('getrowdata', 0);
                        </code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span135'>getrenderedrowdata</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the data of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrenderedrowdata method.
                        </p>
                        <pre><code>
// @param row render index. 
var data = $('#grid').jqxGrid('getrenderedrowdata', 0);
                        </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span86'>getrows</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets all rows.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrows method.
                        </p>
                        <pre><code>
var rows = $('#grid').jqxGrid('getrows');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>getdatainformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets bound data information.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getdatainformation method.
                        </p>
                        <pre><code>
var datainformation = $('#grid').jqxGrid('getdatainformation');
var rowscount = datainformation.rowscount;
var sortinformation = datainformation.sortinformation;
var sortcolumn = sortinformation.sortcolumn;
var sortdirection = sortinformation.sortdirection;
var paginginformation = datainformation.paginginformation;
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;
                        </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span59'>getsortinformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the sort information.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getsortinformation method.
                        </p>
                        <pre><code>
var sortinformation = $('#grid').jqxGrid('getsortinformation');
var sortcolumn = sortinformation.sortcolumn;
var sortdirection = sortinformation.sortdirection;
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span60'>getpaginginformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.pager.js)</p>
                        <p>
                            Gets the paging information.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getpaginginformation method.
                        </p>
                        <pre><code>
var paginginformation = $('#grid').jqxGrid('getpaginginformation');
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pagescount = paginginformation.pagescount;
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span70'>localizestrings</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Localizes the grid strings. This method allows you to change the valus of all Grid strings and also to change the cells formatting settings.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the localizestrings method.
                        </p>
                        <pre><code>
var localizationobj = {};
localizationobj.pagergotopagestring = "Page:";
localizationobj.pagershowrowsstring = "angezeigten datensätze";
localizationobj.pagerrangestring = " aus ";
localizationobj.pagernextbuttonstring = "kommend";
localizationobj.pagerpreviousbuttonstring = "vorherig";
localizationobj.sortascendingstring = "aufsteigend sortieren";
localizationobj.sortdescendingstring = "absteigend sortieren";
localizationobj.sortremovestring = "entfernen sortierung";

localizationobj.firstDay = 1;
localizationobj.percentsymbol = "%";
localizationobj.currencysymbol = "€";
localizationobj.currencysymbolposition = "before";
localizationobj.decimalseparator = ".";
localizationobj.thousandsseparator = ",";

var days = {
    // full day names
    names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
    // abbreviated day names
    namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
    // shortest day names
    namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
};

localizationobj.days = days;

var months = {
    // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
    names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
    // abbreviated month names
    namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
};

localizationobj.months = months;

// apply localization.
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span71'>scrolloffset</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Scrolls the grid contents.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the scrolloffset method.
                        </p>
                        <pre><code>
//@param Number. Top position.
//@param Number. Left position.
$('#grid').jqxGrid('scrolloffset', 10, 20);
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span72'>beginupdate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Starts an update operation. This is appropriate when calling multiple methods or set multiple properties at once.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the beginupdate method.
                        </p>
                        <pre><code>.
$('#grid').jqxGrid('beginupdate');
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span73'>resumeupdate</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Resumes the update operation.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the resumeupdate method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('resumeupdate');
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span74'>updating</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the updating operation state.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the updating method.
                        </p>
                        <pre><code>
var isupdating = $('#grid').jqxGrid('updating');
                        </code></pre>
                    </div>
                </td>
            </tr>
 <tr>
                <td class="documentation-option-type-click">
                    <span id='Span75'>ensurerowvisible</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Scrolls to a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the ensurerowvisible method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('ensurerowvisible', 100);
                        </code></pre>
                    </div>
                </td>
            </tr>
 <tr>
                <td class="documentation-option-type-click">
                    <span id='Span79'>setrowheight</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the height of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setrowheight method.
                        </p>
                        <pre><code>
// @param Number. The row index.
// @param Number. The new height.
$('#grid').jqxGrid('setrowheight', 1, 50);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span80'>getrowheight</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the height of a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrowheight method.
                        </p>
                        <pre><code>
// @param Number. The row index.
var height = $('#grid').jqxGrid('getrowheight', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Sorting(requires jqxgrid.sort.js) 
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span61'>sortby</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sorts the Grid data.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the sortby method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('sortby', 'columndatafield', 'asc');
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span133'>removesort</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes the sorting.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the removesort method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('removesort');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span62'>getsortcolumn</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>(requires jqxgrid.sort.js)</p>                 
                        <p>
                            Gets the sort column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getsortcolumn method.
                        </p>
                        <pre><code>
var sortcolumn = $('#grid').jqxGrid('getsortcolumn');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Grouping(requires jqxgrid.grouping.js)                
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>addgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Groups by a column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the addgroup method.
                        </p>
                        <pre><code>
// @param String.
$('#grid').jqxGrid('addgroup', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span64'>insertgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Groups by a column. 
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the insertgroup method.
                        </p>
                        <pre><code>
// @param Number
// @param String. 
$('#grid').jqxGrid('insertgroup', 1, 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span65'>removegroupat</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes a group at specific index.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the removegroupat method.
                        </p>
                        <pre><code>
//@param Number
$('#grid').jqxGrid('removegroupat', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span66'>removegroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes a group.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the removegroup method.
                        </p>
                        <pre><code>
//@param String
$('#grid').jqxGrid('removegroup', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span113'>getrootgroupscount</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the number of root groups.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrootgroupscount method.
                        </p>
                        <pre><code>
var groups = $('#grid').jqxGrid('getrootgroupscount');
                        </code></pre>
                    </div>
                </td>
            </tr>
     <tr>
                <td class="documentation-option-type-click">
                    <span id='Span114'>collapsegroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Collapses a group.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the collapsegroup method.
                        </p>
                        <pre><code>
// @param Number. The group index.
$('#grid').jqxGrid('collapsegroup', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
     <tr>
                <td class="documentation-option-type-click">
                    <span id='Span115'>expandgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Expands a group.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the expandgroup method.
                        </p>
                        <pre><code>
// @param Number. The group index.
$('#grid').jqxGrid('expandgroup', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
     <tr>
                <td class="documentation-option-type-click">
                    <span id='Span116'>collapseallgroups</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Collapses all groups.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the collapseallgroups method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('collapseallgroups');
                        </code></pre>
                    </div>
                </td>
            </tr>
    <tr>
                <td class="documentation-option-type-click">
                    <span id='Span117'>expandallgroups</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Expands all groups.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the expandallgroups method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('expandallgroups');
                        </code></pre>
                    </div>
                </td>
            </tr>
   <tr>
                <td class="documentation-option-type-click">
                    <span id='Span137'>getgroup</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a group. The method returns details about the Group.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getgroup method.
                        </p>
                        <pre><code>
// @param Number. The group index.
var group = $('#grid').jqxGrid('getgroup', 0);
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span94'>iscolumngroupable</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets whether the user can group by a column.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the iscolumngroupable method.
                        </p>
                        <pre><code>
// @param String. The column datafield member.
var groupable = $('#grid').jqxGrid('iscolumngroupable', 'columndatafield');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Filtering(requires jqxgrid.filter.js) 
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span140'>addfilter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Adds a filter to the Grid.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the addfilter method.
                        </p>
                        <pre><code>
var filtergroup = new $.jqx.filter();
var filtervalue = 10; // Each cell value is compared with the filter's value.
// filtertype - numericfilter, stringfilter, datefilter or customfilter. 
// condition
// possible conditions for string filter: 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'CONTAINS_CASE_SENSITIVE',
// 'DOES_NOT_CONTAIN', 'DOES_NOT_CONTAIN_CASE_SENSITIVE', 'STARTS_WITH', 'STARTS_WITH_CASE_SENSITIVE',
// 'ENDS_WITH', 'ENDS_WITH_CASE_SENSITIVE', 'EQUAL', 'EQUAL_CASE_SENSITIVE', 'NULL', 'NOT_NULL'
// possible conditions for numeric filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'
// possible conditions for date filter: 'EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'                         
var filter = filtergroup.createfilter(filtertype, filtervalue, condition);
var filter2 = filtergroup.createfilter(filtertype, filtervalue2, condition2);
// To create a custom filter, you need to call the createfilter function and pass a custom callback function as a fourth parameter.
// If the callback's name is 'customfilter', the Grid will pass 3 params to this function - filter's value, current cell value to evaluate and the condition.                        
// operator - 0 for "and" and 1 for "or"
filtergroup.addfilter(operator, filter);
filtergroup.addfilter(operator, filter2);
// datafield is the bound field.
// adds a filter to the grid.
$('#grid').jqxGrid('addfilter', datafield, filtergroup);
// to add and apply the filter, use this:
$('#grid').jqxGrid('addfilter', datafield, filtergroup, true);
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span141'>removefilter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes a filter from the Grid.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the removefilter method.
                        </p>
                        <pre><code>// datafield is the bound field.
$('#grid').jqxGrid('removefilter', datafield);
// to remove the filter and refresh the Grid, use this:
$('#grid').jqxGrid('removefilter', datafield, true);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span142'>clearfilters</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears all filters from the Grid.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the clearfilters method.
                        </p>
                        <pre><code>$('#grid').jqxGrid('clearfilters');</code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span143'>applyfilters</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Applies all filters to the Grid.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the applyfilters method.
                        </p>
                        <pre><code>$('#grid').jqxGrid('applyfilters');</code></pre>
                    </div>
                </td>
            </tr>
       <tr>
                <td class="documentation-option-type-click">
                    <span id='Span144'>getfilterinformation</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the information about the Grid filters. The returned information includes the filter objects and filter columns.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getfilterinformation method.
                        </p>
                        <pre><code>
var filtersinfo = $('#grid').jqxGrid('getfilterinformation');
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Paging(requires jqxgrid.pager.js) 
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span67'>gotopage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Navigates to a page when the Grid paging is enabled i.e when the pageable property value is true.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the gotopage method.
                        </p>
                        <pre><code>
//@param Number
$('#grid').jqxGrid('gotopage', 1);
                        </code></pre>
                    </div>
                </td>
            </tr>
     <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>gotoprevpage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Navigates to a previous page when the Grid paging is enabled i.e when the pageable property value is true.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the gotoprevpage method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('gotoprevpage');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span69'>gotonextpage</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Navigates to a next page when the Grid paging is enabled i.e when the pageable property value is true.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the gotonextpage method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('gotonextpage');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Editing(requires jqxgrid.edit.js) 
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
           <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
  <tr>
                <td class="documentation-option-type-click">
                    <span id='Span125'>getcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getcell method.
                        </p>
                        <pre><code>
// @param Number. The row index.
// @param String. The column datafield.
var cell = $('#grid').jqxGrid('getcell', 0, datafield);
                        </code></pre>
                    </div>
                </td>
            </tr>
<tr>
                <td class="documentation-option-type-click">
                    <span id='Span136'>getrenderedcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getrenderedcell method.
                        </p>
                        <pre><code>
// @param Number. The row render index.
// @param String. The column datafield.
var cell = $('#grid').jqxGrid('getrenderedcell', 0, datafield);
                        </code></pre>
                    </div>
                </td>
            </tr>
<tr>
                <td class="documentation-option-type-click">
                    <span id='Span178'>getcellatposition</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets a cell at specific position.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getcellatposition method.
                        </p>
                        <pre><code>
// @param Number. The left position.
// @param Number. The top position.
var cell = $('#grid').jqxGrid('getcellatposition', left, top);
                        </code></pre>
                    </div>
                </td>
            </tr>
   <tr>
   <tr>
                <td class="documentation-option-type-click">
                    <span id='Span126'>getcellvalue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets the value of a cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getcellvalue method.
                        </p>
                        <pre><code>
// @param row index.
// @param column datafield.
var value = $('#grid').jqxGrid('getcellvalue', 0, "columndatafield");
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>setcellvalue</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets a new value to a cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the setcellvalue method.
                        </p>
                        <pre><code>
// @param row index.
// @param column datafield.
// @param cell value
 $("#jqxgrid").jqxGrid('setcellvalue', 0, "firstname", "New Value");
                        </code></pre>
                    </div>
                </td>
            </tr>
        <tr>
                <td class="documentation-option-type-click">
                    <span id='Span161'>begincelledit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows the cell's editor.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the begincelledit method.
                        </p>
                        <pre><code>
// @param row index
// @param column datafield.
var editable = $("#jqxgrid").jqxGrid('begincelledit', 0, "firstname");
                        </code></pre>
                    </div>
                </td>
            </tr>
              <tr>
                <td class="documentation-option-type-click">
                    <span id='Span162'>endcelledit</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides the edit cell's editor and saves or cancels the changes.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the endcelledit method.
                        </p>
                        <pre><code>
// @param row index
// @param column datafield.
// @param Boolean. - "true" cancels the changes, "false" confirms the changes.
var editable = $("#jqxgrid").jqxGrid('endcelledit', 0, "firstname", false);
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span129'>updaterow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Updates a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the updaterow method.
                        </p>
                        <pre><code>
// @param row id.
// @param row data..
var value = $('#grid').jqxGrid('updaterow', rowid, newdata);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span130'>deleterow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Deletes a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the deleterow method.
                        </p>
                        <pre><code>
// @param row id.
var value = $('#grid').jqxGrid('deleterow', rowid);
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span131'>addrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Adds a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the addrow method.
                        </p>
                        <pre><code>
// @param row id.
// @param row data.
var value = $('#grid').jqxGrid('addrow', rowid, newdata);
                        </code></pre>
                    </div>
                </td>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                    Selection(requires jqxgrid.selection.js) 
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
            <tr>
                <th>
                </th>
                <th>
                </th>
                <th>
                </th>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span76'>selectrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                       <p>
                            Selects a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the selectrow method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('selectrow', 10);
                        </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span77'>unselectrow</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                         <p>
                            Unselects a row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the unselectrow method.
                        </p>
                        <pre><code>
// @param Number. The row index.
$('#grid').jqxGrid('unselectrow', 10);
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span155'>selectcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                         <p>
                            Selects a cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the selectcell method.
                        </p>
                        <pre><code>
// @param Number. The row index.
// @param String. The column datafield.
$('#grid').jqxGrid('selectcell', 10, 'firstname');
                        </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span156'>unselectcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                         <p>
                            Unselects a cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the unselectcell method.
                        </p>
                        <pre><code>
// @param Number. The row index.
// @param String. The column datafield.
$('#grid').jqxGrid('unselectcell', 10, 'firstname');
                        </code></pre>
                    </div>
                </td>
            </tr>
           <tr>
                <td class="documentation-option-type-click">
                    <span id='Span95'>clearselection</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Clears the selection.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the clearselection method.
                        </p>
                        <pre><code>
$('#grid').jqxGrid('clearselection');
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span78'>getselectedrowindex</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Gets the index of the selected row.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getselectedrowindex method.
                        </p>
                        <pre><code>
var rowindex = $('#grid').jqxGrid('getselectedrowindex');
                        </code></pre>
                    </div>
                </td>
            </tr>
         <tr>
                <td class="documentation-option-type-click">
                    <span id='Span108'>getselectedrowindexes</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlerow', 'multiplerows' or 'multiplerowsextended'</p>
                        <p>
                            Gets the indexes of the selected rows.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getselectedrowindexes method.
                        </p>
                        <pre><code>
var rowindexes = $('#grid').jqxGrid('getselectedrowindexes');
                        </code></pre>
                    </div>
                </td>
            </tr>
          <tr>
                <td class="documentation-option-type-click">
                    <span id='Span157'>getselectedcell</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                       <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                         <p>
                            Gets the selected cell.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getselectedcell method.
                        </p>
                        <pre><code>
var cell = $('#grid').jqxGrid('getselectedcell');
                        </code></pre>
                    </div>
                </td>
            </tr>
      <tr>
                <td class="documentation-option-type-click">
                    <span id='Span158'>getselectedcells</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>The expected selection mode is 'singlecell', 'multiplecells' or 'multiplecellsextended'</p>
                        <p>
                            Gets all selected cells.
                        </p>
                        <h4>
                            Code example</h4>
                        <p>
                            Invoke the getselectedcells method.
                        </p>
                        <pre><code>
var cells = $('#grid').jqxGrid('getselectedcells');
                        </code></pre>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
